<template>
  <div class="app-container" style="height: 100%; flex: 1; padding-top: 0">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
          <el-tab-pane
            :label="`工单明细（${props.factoryDetail.totalOrderCount}）`"
            name="order_list"
          >
            <OrderList :factory-id="props.factoryDetail.id" ref="orderListRef" />
          </el-tab-pane>
          <el-tab-pane :label="`工单费用（${props.factoryDetail.orderFeeCount}）`" name="order_fee">
            <OrderFeeList :factory-id="props.factoryDetail.id" ref="orderFeeListRef" />
          </el-tab-pane>
          <el-tab-pane
            :label="`工单配件（${props.factoryDetail.orderSpareCount}）`"
            name="part_list"
          >
            <PartList :factory-id="props.factoryDetail.id" ref="partListRef" />
          </el-tab-pane>
          <el-tab-pane
            label="结算价管理"
            name="settlement_price_manager"
            v-if="props.factoryDetail.status === 1"
          >
            <SettlementPriceManager
              v-if="route.params.id"
              @loading-change="(loading: boolean) => $emit('loading-change', loading)"
              :factory-id="JSON.parse(JSON.stringify(route.params.id))"
              ref="settlementPriceManagerRef"
            />
          </el-tab-pane>
          <el-tab-pane label="充值记录" name="recharge_record">
            <RechargeRecord
              v-if="route.params.id"
              @loading-change="(loading: boolean) => $emit('loading-change', loading)"
              ref="rechargeRecordRef"
              :factory-id="JSON.parse(JSON.stringify(route.params.id))"
            />
          </el-tab-pane>
          <el-tab-pane label="账号管理" name="account_manager">
            <AccountManagerList :factory-id="props.factoryDetail.id" ref="accountManagerListRef" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, PropType } from 'vue'
  import { useRoute } from 'vue-router'
  import SettlementPriceManager from './components/SettlementPriceManger/index.vue'
  import RechargeRecord from './components/RechargeRecord/index.vue'
  import OrderList from './components/OrderList/index.vue'
  import PartList from './components/PartList/index.vue'
  import OrderFeeList from './components/OrderFeeList/index.vue'
  import AccountManagerList from './components/AccountManagerList/index.vue'
  import { FactoryDetail } from './types'

  const props = defineProps({
    factoryDetail: {
      type: Object as PropType<FactoryDetail>,
      required: true,
    },
  })

  // 路由
  const route = useRoute()

  // 激活的标签
  const activeName = ref('order_list')

  // 配件列表组件实例
  const partListRef = ref<InstanceType<typeof PartList> | null>(null)

  // 工单列表组件实例
  const orderListRef = ref<InstanceType<typeof OrderList> | null>(null)

  // 工单费用列表组件实例
  const orderFeeListRef = ref<InstanceType<typeof OrderFeeList> | null>(null)

  // 结算价管理表单组件实例
  const settlementPriceManagerRef = ref<InstanceType<typeof SettlementPriceManager> | null>(null)

  // 充值记录列表组件实例
  const rechargeRecordRef = ref<InstanceType<typeof RechargeRecord> | null>(null)

  // 账号管理列表组件实例
  const accountManagerListRef = ref<InstanceType<typeof AccountManagerList> | null>(null)

  // 标签切换事件
  const handleTabChange = (tabName: string) => {
    if (tabName === 'order_list') {
      if (orderListRef.value) {
        orderListRef.value.getData()
      }
    }

    if (tabName === 'part_list') {
      if (partListRef.value) {
        partListRef.value.getData()
      }
    }

    if (tabName === 'order_fee') {
      if (orderFeeListRef.value) {
        orderFeeListRef.value.getData()
      }
    }

    if (tabName === 'recharge_record') {
      if (rechargeRecordRef.value) {
        rechargeRecordRef.value.getList()
      }
    }

    if (tabName === 'settlement_price_manager') {
      if (settlementPriceManagerRef.value) {
        settlementPriceManagerRef.value.getList()
      }
    }

    if (tabName === 'account_manager') {
      if (accountManagerListRef.value) {
        accountManagerListRef.value.getData()
      }
    }
  }

  onMounted(() => {
    if (orderListRef.value) {
      orderListRef.value.getData()
    }
  })
</script>

<style lang="scss" scoped>
  @import './index';
</style>
